<template>
  <avue-form v-model="form" :option="option">
    <template #domicile_full>
      <el-input :value="domicile_full" disabled />
    </template>

    <template #address_citys>
      <el-input :value="address_citys" disabled />
    </template>
  </avue-form>
</template>
<script setup lang="ts">
import { UserModel } from "@/model/user-model";
import { userDetailOption } from "../detail/avue-option";
import UserAPI from "@/api/user";

defineOptions({
  name: "UserDetailForm",
});

// 定义props
const props = defineProps<{
  userId: any;
}>();

// 监听userId变化，重新获取数据
watch(
  () => props.userId,
  async () => fetchData(),
  {
    immediate: true,
  }
);

const form = ref<UserModel>();

// 计算完整的户籍地址
const domicile_full = computed(() => {
  const userModel = form.value;
  return `${userModel?.domicile_province || ""}${userModel?.domicile_city || ""}${userModel?.domicile_area || ""}`;
});
// 计算完整家庭地址
const address_citys = computed(() => {
  const userModel = form.value;
  return `${userModel?.address_province || ""}${userModel?.address_city || ""}${userModel?.address_area || ""}${userModel?.address_street || ""}`;
});

const option = ref(userDetailOption);

/**
 * @description 获取数据
 */
function fetchData() {
  if (!props.userId) {
    ElMessage.error("用户ID错误");
    return;
  }
  UserAPI.detail(props.userId).then((res) => {
    form.value = res;
  });
}
</script>

<style lang="scss" scoped></style>
